<template>
  <div class="table-block">
    <div class="header">
      <div class="title">
        {{ title }}
        <el-tooltip
          popper-class="title-tips"
          placement="bottom"
          effect="dark"
          :content="titleTipsContent"
        >
          <img :src="tips" alt="" class="tips" />
        </el-tooltip>
      </div>
      <div class="lookmore" @click="lookmore" v-if="!loading">
        <span>查看历史</span><img :src="more" alt="" v-defaultCover />
      </div>
    </div>
    <div
      class="content"
      :style="loading || !tableData.length ? 'height:calc(100vh - 150px);' : ''"
      v-loading="loading"
      element-loading-background="#2B2B2B"
      element-loading-spinner="el-icon-loading"
    >
      <template v-if="!loading">
        <template v-if="tableData.length">
          <thead>
            <tr>
              <th
                scope="col"
                v-for="({ key, name, hasIcon, content }, index) in columns"
                :key="key"
                :class="`column${index + 1}`"
              >
                {{ name }}
                <div class="active-info" v-if="index === 1 && activeInfo.rank">
                  <span class="rank"> (第{{ activeInfo.rank }}) </span>
                  <RankChange :rankChange="activeInfo.rankChange" />
                </div>
                <el-tooltip
                  v-if="hasIcon"
                  popper-class="tips-tooltip"
                  placement="bottom"
                  effect="dark"
                  :content="content"
                >
                  <img class="icon" :src="tips" alt="" v-defaultCover />
                </el-tooltip>
              </th>
            </tr>
          </thead>
          <div :class="{ 'body-content': true, 'guide-visible': guideVisible }" v-judgeScrollBar>
            <tbody>
              <tr
                v-for="(
                  {
                    name,
                    value,
                    rank_change,
                    customTurnoverPercent,
                    turnover,
                    radioRank,
                    code,
                    market,
                    is_new
                  },
                  index
                ) in tableData"
                :class="getTrClass(code, radioRank)"
                :key="index"
                @mouseenter="setHoverBlock(code)"
                @mouseleave="hoverBlock = ''"
                @mouseover="setHoverBlock(code)"
                @click.stop="$emit('updateActiveBlock', { code, name, market, title })"
                @dblclick.stop="dbClick(code, market)"
              >
                <th scope="col" class="column1" v-tolerant>
                  <span>{{ index + 1 }}</span>
                  <RankChange :rankChange="rank_change" />
                </th>
                <th
                  :class="{
                    column2: true,
                    guide: hasGuide && guideVisible && index === 0
                  }"
                >
                  <!-- 首次进入的引导 -->
                  <Guide
                    v-if="hasGuide && guideVisible && index === 0"
                    :visible="guideVisible"
                    title="查看成交额详情"
                    content="鼠标移动至单元格上，显示详细的成交额"
                    buttonContent="我知道了"
                    @hiddenGuide="hiddenGuide"
                  >
                    <span slot="reference" v-tolerant>{{ name }}</span>
                  </Guide>

                  <span v-else v-tolerant>{{ name }}</span>
                  <div v-if="is_new" class="new-rank"><span>新上榜</span></div>
                  <div class="turnover-container" v-if="isShowTurnover">
                    <el-tooltip
                      :value="hoverBlock === code"
                      placement="bottom"
                      effect="dark"
                      :manual="true"
                      :close-delay="0"
                      :open-delay="0"
                      popper-class="turnover-popper"
                      :content="`成交额 ${convertNumber(turnover, 'hundredMillion', 2)}`"
                    >
                      <div class="turnover" :style="`width: ${customTurnoverPercent}%;`"></div>
                    </el-tooltip>
                  </div>
                </th>
                <th class="column3">
                  <span v-tolerant>{{ reservedTwo(value) }}</span
                  >%
                </th>
              </tr>
            </tbody>
          </div>
        </template>
        <el-empty
          v-else
          style="height: 100%"
          :image="empty"
          :image-size="96"
          description="数据预加载中，交易日9.30-15.00刷新数据"
        ></el-empty>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import RankChange from '@/components/common/RankChange.vue';
import type { ActiveInfo, Column, TableData } from '@/types/homeTable.ts';
import { KLineFenshiId, KLineFenshiPeriod } from '@/types/toolsType';
import { convertNumber, jumpToKlineFenshi, reservedTwo } from '_t';
import config from '@/config/index.ts';
import { ActiveTable } from '@/types/table';
const {
  imgs: { more, tips, empty },
  storageKey: { firstShowTurnover }
} = config;

const props = withDefaults(
  defineProps<{
    // 是否有引导
    hasGuide: boolean;
    // 当前选中的板块
    activeBlockCode: string;
    // 当前选中的板块的排名
    activeInfo: ActiveInfo;
    // title上的提示语
    titleTipsContent: string;
    title: string;
    isShowTurnover: boolean;
    tableData: TableData[];
    columns: Column[];
    loading: boolean;
  }>(),
  {
    hasTour: false,
    date: '',
    activeBlockCode: '',
    titleTipsContent: '',
    isShowTurnover: false,
    loading: true
  }
);
const emits = defineEmits<{
  (e: 'updateActiveBlock', { code, market }: ActiveTable): void;
  (e: 'lookmore'): void;
}>();

const lookmore = () => {
  emits('lookmore');
};

const guideVisible = ref(false);

const instance = getCurrentInstance() as any;
// 获取当前缓存实例
const localforageIns = instance.proxy.$localforageIns;

const hiddenGuide = () => {
  guideVisible.value = false;
  localforageIns.setItem(firstShowTurnover, true);
};

// 跳转k线
const dbClick = (code: string, market: string) => {
  jumpToKlineFenshi(code, market, KLineFenshiId.kLine, KLineFenshiPeriod.kLine);
};
const hoverBlock = ref('');

const setHoverBlock = (code: string) => {
  !guideVisible.value && (hoverBlock.value = code);
};

// 获取tr的class
const getTrClass = (code: string, radioRank: number | undefined) => {
  return {
    'first-place': radioRank === 1,
    'second-place': radioRank === 2,
    'third-place': radioRank === 3,
    active: code === props.activeBlockCode
  };
};

watch(
  () => props.isShowTurnover,
  nval => {
    if (nval) {
      localforageIns.getItem(firstShowTurnover).then((res: boolean) => {
        if (!res && props.hasGuide) {
          guideVisible.value = true;
        }
      });
    }
  }
);
</script>

<style lang="less">
.title-tips {
  font-family: MicrosoftYaHei;
  font-size: 12px;
  color: #ffffff;
  text-align: justify;
  font-weight: 400;
  line-height: 16px !important;
  width: 260px;
}
.tips-tooltip {
  width: 150px;
}
.el-popper:not(.el-popover) {
  pointer-events: none;
}
.turnover-popper {
  transition: none !important;
}
.el-popper.is-light .el-popper__arrow::before {
  background-color: #323232;
  border: 0;
}
</style>
<style scoped lang="less">
.table-block {
  box-sizing: border-box;
  width: 32.86%;
  max-width: 472px;
  padding: 6px 8px 8px;
  background: #222222;
  border-radius: 4px;
  .header {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      display: flex;
      align-items: center;
      font-family: MicrosoftYaHei-Bold;
      font-size: 14px;
      color: #f2f2f2;
      line-height: 18px;
      font-weight: 700;
      .tips {
        width: 12px;
        height: 12px;
        margin-left: 6px;
        cursor: pointer;
      }
    }
    .lookmore {
      display: flex;
      align-items: center;
      cursor: pointer;
      span {
        font-family: MicrosoftYaHei;
        font-size: 12px;
        color: #828282;
        text-align: right;
        line-height: 18px;
        font-weight: 400;
      }
      img {
        margin-left: 2px;
        width: 16px;
        height: 16px;
      }
    }
  }
  .content {
    width: 100%;
    border: 1px solid #323232;
    border-bottom: none;
    .body-content:hover {
      &.has-scrollbar:not(.guide-visible) {
        // 滚动条宽度,防止滚动条占据宽度造成布局错误
        margin-right: calc(var(--scrollbarWidthDefault) * -1);
      }
      &::-webkit-scrollbar {
        // hover的时候展示滚动条
        width: var(--scrollbarWidthDefault);
      }
    }
    .body-content {
      max-height: calc(100vh - 190px);
      overflow-y: auto;
      display: block;
      &.guide-visible {
        overflow-y: hidden;
      }
      &::-webkit-scrollbar {
        width: 0;
      }
    }
    thead tr {
      height: 34px;
    }
    thead,
    tbody {
      display: block;
      width: 100%;
      .icon {
        width: 12px;
        height: 12px;
        margin-left: 4px;
        cursor: pointer;
      }
    }
    tr {
      width: 100%;
      height: 42px;
      display: flex;
    }
    th {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .column1 {
      width: 14.7%;
      flex-direction: column;
    }
    .column2 {
      pointer-events: auto;
      width: 54.6%;
      justify-content: flex-start;
      padding-left: 11.5px;
      flex-shrink: 0;
      .new-rank {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 14px;
        border: 1px solid #ff2929;
        border-radius: 2px;
        font-family: MicrosoftYaHeiUI;
        font-size: 12px;
        color: #ff2929;
        line-height: 14px;
        font-weight: 400;
        margin-left: 4px;
        margin-right: 4px;
        white-space: nowrap;
        span {
          transform: scale(0.8);
        }
      }
    }
    .column3 {
      width: 30.2%;
      justify-content: flex-end;
      padding-right: 11.5px;
    }

    thead {
      background: #161616;
      tr {
        border-bottom: 1px solid #323232;
        th {
          font-family: MicrosoftYaHeiUI;
          font-size: 14px;
          color: #8c8c8c;
          line-height: 18px;
          font-weight: 400;
          display: flex;
          .active-info {
            display: flex;
            align-items: center;
            .rank {
              color: #ffb300;
            }
            :deep(.rank-change) {
              margin-left: 4px;
            }
          }
        }
      }
    }
    tbody {
      tr {
        border-bottom: 1px solid #323232;
        cursor: pointer;
        box-sizing: border-box;
        &.active {
          border: 1px solid rgba(255, 255, 255, 0.6);
        }
        &:hover:not(.first-place, .second-place, .third-place) {
          background: #2b2b2b;
        }
      }
      .first-place {
        background-image: linear-gradient(
          270deg,
          rgba(255, 198, 74, 0) 0%,
          rgba(255, 198, 74, 0.24) 100%
        );
        &:hover {
          background-image: linear-gradient(
            270deg,
            rgba(255, 198, 74, 0) 0%,
            rgba(255, 198, 74, 0.08) 100%
          );
        }
      }
      .second-place {
        background-image: linear-gradient(
          270deg,
          rgba(126, 200, 255, 0) 2%,
          rgba(126, 200, 255, 0.24) 100%
        );
        &:hover {
          background-image: linear-gradient(
            270deg,
            rgba(126, 200, 255, 0) 2%,
            rgba(126, 200, 255, 0.08) 100%
          );
        }
      }
      .third-place {
        background-image: linear-gradient(
          270deg,
          rgba(248, 174, 150, 0) 4%,
          rgba(248, 174, 150, 0.24) 100%
        );
        &:hover {
          background-image: linear-gradient(
            270deg,
            rgba(248, 174, 150, 0) 4%,
            rgba(248, 174, 150, 0.08) 100%
          );
        }
      }
      th {
        font-family: MicrosoftYaHeiUI;
        font-size: 14px;
        color: #f2f2f2;
        line-height: 18px;
        font-weight: 400;
      }
      .column2 {
        position: relative;
        // overflow: hidden;
        span {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        &.guide {
          background: #2b2b2b;
        }
        .turnover-container {
          position: absolute;
          width: 90%;
          height: 4px;
          bottom: 0;
          left: 11.5px;
          .turnover {
            position: absolute;
            bottom: 0;
            height: 4px;
            background-color: #828282;
          }
        }
      }
    }
    th:not(:last-child) {
      border-right: 1px solid #323232;
    }
  }
}
:deep(.el-empty__description) {
  margin-top: 12px !important;
}
</style>
